<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>美食特产</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/jingdian.css">
    <link rel="stylesheet" href="css/common.css">

    <!-- Favicon -->
    <link rel="icon" href="img/icon/favicon.ico">

    <!--Ajax-->
    <script>
        $(function () {
            load(1,5);
        });

        function load(current,pageSize) {
            $.get("/meishi/queryByPage",{currentPage:current,pageSize:pageSize},function (data) {
                //解析pageBean数据并在页面上展示
                //var pageBean=$.parseJSON(data);//解析JSON
                var pageBean=data;
                //1.分页的工具条数据展示
                $("#pages").html(pageBean.pages);
                $("#totalCount").html(pageBean.total);

                //1.1 显示分页页码
                var page_lis="";
                var  firstPage='<li onclick="javascript:load(1,5)"><a href="javascript:void(0)">首页</a></li>';
                //计算上一页
                var  beforeNum=current-1;
                if (beforeNum <= 0) {
                    beforeNum=1;
                }
                var beforePage='<li class="threeword"  onclick="javascript:load('+beforeNum+',5)"><a href="javascript:void(0)">上一页</a></li>';
                page_lis+=firstPage;
                page_lis+=beforePage;

                //1.2 最多显示10个页码
                //定义开始位置 begin 结束位置 end
                var begin;
                var end;

                if (pageBean.pages<10){
                    //总页数小于10
                    begin=1;
                    end=pageBean.pages;
                } else {
                    //总页数超过10
                    begin=pageBean.current-5;
                    end=pageBean.current+4;

                    if (begin<1){//开始小于1
                        begin=1;
                        end=begin+9;
                    }

                    if (end > pageBean.pages) {//结束位置大于总页数
                        end=pageBean.pages;
                        begin=end-9;
                    }
                }

                for (var i = begin; i <=end ; i++) {//遍历写入
                    var li;
                    //如果是当前页，加class属性
                    if (pageBean.current==i) {//判断是不是当前页按钮
                        li='<li class="curPage" onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    } else {
                        li='<li onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    page_lis+=li;
                }
                //尾页
                var lastPage='<li onclick="javascript:load('+pageBean.pages+',5)"><a href="javascript:void(0);">末页</a></li>'
                //计算下一页
                var nextNum=current+1;
                if(nextNum>=pageBean.pages){
                    nextNum=pageBean.pages;
                }

                var nextPage='<li class="threeword" onclick="load('+nextNum+',5)"><a href="javascript:void(0);">下一页</a></li>';
                page_lis+=nextPage;
                page_lis+=lastPage;
                $("#pageNum").html(page_lis);


                //展示景点数据
                var lis="";
                $.each(pageBean.records,function (i) {
                    var meishi=pageBean.records[i];
                    var li='<li>' +
                        '<div class="img"><img src="'+meishi.images[meishi.images.length-1].src+'" alt="" class="img-responsive"></div>\n' +
                        '                            <div class="text1">\n' +
                        '                                <p>'+meishi.mname+'</p>\n' +
                        '                                <br/>\n' +
                        '                                <p>'+meishi.position+'</p>\n' +
                        '                            </div>\n' +
                        '                            <div class="price">\n' +
                        '                                    <p>联系方式：'+meishi.telephone+'</p>\n' +
                        '                                     <p>商家：暂无</p>\n' +
                        '                                <a href="/detail/meishi/'+meishi.mid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                        '                            </div></li>';
                    lis+=li;
                });
                $("#route").html(lis);
            });
        }
    </script>
    <script>
        $(function () {//获取表单并跳转
            $("#btn").click(function () {
                var key=$("#ipt").val();
                var url="/searchDetail/"+key;
                location.href=url;
            });
        });
    </script>
</head>
<body>
<div th:insert="~{header :: copy}"></div>

<div class="container">
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img src="img/local.png" alt="">
                <p><a href="/">商丘旅游</a>><span>美食特产</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>美食特产</span>
                        <span class="jg">信息</span>
                    </div>
                    <ul id="route">
                        <!--Ajax 填充-->
                    </ul>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span id="pages"></span>页<span id="totalCount"></span>条
                    </div>
                    <div class="pageNum">
                        <ul id="pageNum">
                            <li><a href="">首页</a></li>
                            <li class="threeword"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                            <li class="threeword"><a href="javascript:;">末页</a></li>
                        </ul>
                    </div>
                </div>
                <!--酒店推荐-->
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul style="padding-left: 0px">
                        <a th:each="jiudianImg:${@img.queryAll(jiudianImage)}" th:href="${jiudianImg.href}">
                            <li>
                                <div class="left"><img th:src="${jiudianImg.src}" class="img-responsive" alt=""></div>
                                <div class="right">
                                    <p th:text="${jiudianImg.title}">商丘汇美酒店...</p>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>


<div th:insert="~{footer :: copy}"></div>
</body>
</html>
